<template>
  <div>
    <!--头部-->
    <Header @scrollTitle="scrollTitle" :chooseValue="5"></Header>
    <!--banner end-->
    <div class="jqgk" style="background:#FFF5E0">
      <div class="contai" style="max-width:1197px;">
        <div class="top_tit">
          <span class="titleFont" id="headline" v-if="pcshow">720-degree Panoramic Tour </span>
          <span class="titleFont" id="headline" style="font-size:36px" v-if="!pcshow">720-degree Panoramic Tour </span>
          <div style="text-align:left;margin:0px">
            <div class="travel_con">
              <div class="">
                <!-- 图片显示 -->
                <div style="height:105px" v-if="pcshow"></div>
                <div style="height:30px" v-if="!pcshow"></div>
                <el-row style="margin-left:30px;margin-right:30px;">
                  <!-- <a-spin :spinning="spinning" :delay="delayTime"> -->
                    <!-- <div v-if="pcshow" class="centerLinShi">Website upgrading</div>
                    <div v-if="!pcshow" class="centerLinShiForSJ">Website upgrading</div>
                    <div v-for="item in dataList" :key="item.key"> -->

                <div>
                <div>
                  <el-button style="background:#840207;color:#FFF;" @click="openBig">全屏</el-button>
                </div>
                <div  v-if="pcshow"  style="margin-right: 0px; margin-top: 20px;" >
                    <iframe  id="iframe-one" name="mainIframe" src="https://720yun.com/t/93vkt97y01l" frameborder="0" scrolling="auto" width="874" height="600"></iframe>
                </div>
                <div  v-if="!pcshow" style="margin-right: 0px; margin-top: 20px;" >
                    <iframe  id="iframe-one" name="mainIframe" src="https://720yun.com/t/93vkt97y01l" frameborder="0" scrolling="auto" :width="widthForP" height="500"></iframe>
                </div>
                </div>
                      <!-- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> -->

                        <!-- <div

                          v-if="pcshow"
                          class="showPicture"
                          :style="{ float: item.position }"
                          @click="seeInfo(item.url)"
                        >
                          <img
                            :src="item.cover"
                            alt="...."
                            class="sceneryImgSize"
                          />
                          <div class="sceneryFontSize">{{ item.title }}</div>

                        </div> -->
                        <!--  手机端 -->
                        <!-- <div
                          @click="seeInfo(item.url)"
                          v-if="!pcshow"
                          class="showPicture"
                          :style="{ float: item.position }"
                        >
                          <img :src="item.cover" alt="...." />
                          <div class="sceneryFontSize">{{ item.title }}</div>

                        </div> -->
                      <!-- </el-col> -->
                    <!-- </div> -->
                  <!-- </a-spin> -->
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from './header'
import Footer from './footer'
import { getPanorama } from '../request/api'
export default {
  components: { Header, Footer },
  data () {
    return {
      widthForP: 300,
      choseValue: 1,
      pcshow: false,
      styletable: { background: '#F2DCCA' },
      mapStyle: { background: '#FFF5E0' },
      dataList: [],
      spinning: true,
      delayTime: 500
    }
  },
  beforeCreate () {},
  created () {
    this.widthForP = document.body.clientWidth - 60
    if (this._isMobile()) {
      this.pcshow = false
    } else {
      this.pcshow = true
    }
  },

  mounted () {
    this.getPanoramaFunction()
  },

  methods: {
    openBig () {
      let iframe = document.getElementById('iframe-one')
      this.requestFullScreen(iframe)
    },
    requestFullScreen (element) {
      var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen
      if (requestMethod) {
        requestMethod.call(element)
      } else if (typeof window.ActiveXObject !== 'undefined') {
        var wscript = new ActiveXObject('WScript.Shell')
        if (wscript !== null) {
          wscript.SendKeys('{F11}')
        }
      }
    },
    // 获取
    getPanoramaFunction () {
      getPanorama(this.HOST)
        .then(response => {
          this.spinning = true
          this.dataList = response.data.map(function (currentValue, index) {
            index % 2 == 0
              ? (currentValue.position = 'left')
              : (currentValue.position = 'right')
            return currentValue
          })
          this.spinning = false
        })
        .catch(error => {})
    },
    // 判断是PC端还是手机端
    _isMobile () {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      return flag
    },
    // 菜单选择
    tabSelect (e) {
      let value = e.target.dataset.index
      this.choseValue = value
    },
    // 详情()
    seeInfo (e) {
      window.open(e, '_blank')
    },
    // 描点跳转
    scrollTitle () {
      var PageId = document.querySelector('#headline')
      window.scrollTo({
        top: PageId.offsetTop - 40,
        behavior: 'smooth'
      })
    }
  }
}
</script>
<style>
.centerLinShi{
  /* display: flex; */
  text-align: center;
  font-size: 20px;
  margin-top: -50px;

}
.centerLinShiForSJ{
  /* display: flex; */
  text-align: center;
  font-size: 18px;
  margin-top: 0px;

}
.tra_tab {
  font-size: 28px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  display: inline-block;
  width: 193px;
  height: 67px;
  text-align: center;
  line-height: 67px;
  cursor: pointer;
}
.tra_tab_mobile {
  font-size: 14px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  padding: 10px;
}
.tra_tab_line_mobile {
  display: block;
  width: 100%;
  height: 2px;
  background: #840207;
  opacity: 0.1;
}
.tra_tab_line {
  display: block;
  width: 100%;
  height: 8px;
  background: #840207;
  opacity: 0.1;
}
.titleFont {
  font-size: 42px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #840207;
  line-height: 36px;
}
.sceneryImgSize {
  width: 542px;
  height: 359px;
}
.sceneryFontSize {
  font-size: 24px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  padding: 18px 0px 24px 0px;
}
.showPicture {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.sceneryDescFontSize {
  font-size: 18px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  height: 120px;
  color: #484848;
  line-height: 30px;
  text-align: left;
  padding-right: 31px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sceneryBtn {
  font-size: 18px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: #ffffff;
  width: 126px;
  height: 44px;
  background: #840207;
  border: none;
  margin: 25px 0px 50px;
}
</style>
